<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/15
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>宠物领养管理后台</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/metisMenu.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/sb-admin-2.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/admin/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/static/css/admin/boot-crm.css" rel="stylesheet" type="text/css">
    <style>
        .panel-heading{background-color: #337ab7;border-color: #2e6da4;font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
        .panel-heading span{position:absolute;right:10px;top:12px;}
        table{
            border-bottom: 1px solid #ddd !important;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <!-- 导航栏部分 -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <a class="navbar-brand" href="">流浪猫狗管理系统</a>
        </div>
        <!-- 导航栏右侧图标部分 -->
        <!-- 导航栏右侧图标部分 -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- 消息通知 end -->
            <!-- 用户信息和系统设置 start -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="/admin/developing">
                    <i class="fa fa-user fa-fw"></i>
                    <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user ">
                    <li>
                        <input type="hidden" id = "currentAdminId" value="${admin.id}">
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-user fa-fw"></i>
                        管理员：${admin.adminName}</a>
                    </li>
                    <li><a href="/admin/developing"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
                    <li class="divider"></li>
                    <li>
                        <a href="${pageContext.request.contextPath}/admin/AdminLogin">
                            <i class="fa fa-sign-out fa-fw"></i>退出登录
                        </a>
                    </li>
                </ul>
            </li>
            <!-- 用户信息和系统设置结束 -->
        </ul> <!-- 左侧显示列表部分 start-->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <!-- 教学管理  折叠的分组列表 -->
                <div class="panel-heading" id="collapseListGroupHeading3" data-toggle="collapse" data-target="#collapseListGroup3" role="tab">
                    <h4 class="panel-title">
                        后台管理 <span class="fa fa-chevron-up right"></span>
                    </h4>
                </div>
                <div id="collapseListGroup3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading3">
                    <ul class="list-group">
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/UserList">
                                <i class="fa fa-flash fa-fw"></i> 用户信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdminsList">
                                <i class="fa fa-flash fa-fw"></i> 管理员信息
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/PetList">
                                <i class="fa fa-sitemap fa-fw"></i> 宠物管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/AdoptList">
                                <i class="fa fa-sitemap fa-fw"></i> 领养管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/CommentList">
                                <i class="fa fa-sitemap fa-fw"></i> 评论管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/BlogListService">
                                <i class="fa fa-sitemap fa-fw"></i> 团队活动管理
                            </a>
                        </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}${pageContext.request.contextPath}/admin/ApplyList">
                                <i class="fa fa-sitemap fa-fw"></i> 志愿者的申请
                            </a>
                        </li>
                         <li class="list-group-item my_font">
                        <a href="${pageContext.request.contextPath}/admin/agreeList">
                            <i class="fa fa-sitemap fa-fw"></i> 同意领养列表
                        </a>
                    </li>
                        <li class="list-group-item my_font">
                            <a href="${pageContext.request.contextPath}/admin/disagreeList">
                                <i class="fa fa-sitemap fa-fw"></i> 不同意领养列表
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!-- 左侧显示列表部分 end-->

    </nav>
    <!-- 班级列表查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">用户管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <!-- 搜索表单 -->
            <div class="panel-body">
                <form class="form-inline" onsubmit="return false;">
                    <div class="form-group">
                        <label for="findByName">用户名称</label>
                        <input type="text" class="form-control" id="findByName" value="" name="userName">
                    </div>
                    <button type="button" class="btn btn-primary" id="user_find_modal_btn">查询</button>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading" style="height: 40px;line-height: 40px;padding: 0px;font-size: 15px">用户信息列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped" id="user_table">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>电话</th>
                            <th>地址</th>
                            <th>有无领养</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="user" items="${users}">
                            <tr>
                                <td>${user.id}</td>
                                <td>${user.userName}</td>
                                <td>${user.password}</td>
                                <td>${user.sex}</td>
                                <td>${user.age}</td>
                                <td>${user.telephone}</td>
                                <td>${user.address}</td>
                                <td>
                                    <c:choose>
                                        <c:when test="${user.state == 1}">
                                            已领养
                                        </c:when>
                                        <c:otherwise>
                                            未领养
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>
                                    <!-- 添加操作按钮，如编辑和删除 -->
                                    <a href="javascript:void(0);" data-toggle="modal" data-target="#userEditModal" onclick="editUser(${user.id}, '${user.userName}', '${user.password}', '${user.sex}', ${user.age}, '${user.telephone}', '${user.address}', ${user.state})">
                                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
                                    </a>
                                    <a href="javascript:void(0);" onclick="confirmDelete(${user.id});" class="btn btn-danger btn-xs delete_btn">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class="row">
                        <!--分页文字信息  -->
                        <div class="col-md-8" id="page_info_area"></div>
                        <!-- 分页条信息 -->
                        <div class="col-md-4" id="page_nav_area">

                        </div>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
    </div>
    <!-- 用户查询  end-->
</div>
<%-- 模态框--修改用户信息--%>
<div class="modal fade" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="userEditModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="userEditForm" action="${pageContext.request.contextPath}/admin/UserEdit" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="userEditModalLabel">修改用户信息</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit_userId">
                    <div class="form-group">
                        <label for="edit_userName" class="control-label">用户名:</label>
                        <input type="text" class="form-control" id="edit_userName" name="userName">
                    </div>
                    <div class="form-group">
                        <label for="edit_password" class="control-label">密码:</label>
                        <input type="password" class="form-control" id="edit_password" name="password">
                    </div>
                    <div class="form-group">
                        <label for="edit_sex" class="control-label">性别:</label>
                        <select class="form-control" id="edit_sex" name="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit_age" class="control-label">年龄:</label>
                        <input type="number" class="form-control" id="edit_age" name="age">
                    </div>
                    <div class="form-group">
                        <label for="edit_telephone" class="control-label">电话:</label>
                        <input type="text" class="form-control" id="edit_telephone" name="telephone">
                    </div>
                    <div class="form-group">
                        <label for="edit_address" class="control-label">地址:</label>
                        <input type="text" class="form-control" id="edit_address" name="address">
                    </div>
                    <div class="form-group">
                        <label for="edit_state" class="control-label">状态:</label>
                        <select class="form-control" id="edit_state" name="state">
                            <option value="1">已领养</option>
                            <option value="0">未领养</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 用户详细信息模态框 -->
<div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog" aria-labelledby="userDetailModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="userDetailModalLabel">用户详细信息</h4>
            </div>
            <div class="modal-body">
                <div id="userDetailContent">
                    <!-- 查询结果将动态填充到这里 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入js文件 -->
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/metisMenu.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/admin/sb-admin-2.js"></script>
<!-- 编写js代码 -->
<script>
    // 弹出模态框--修改
    function editUser(id, userName, password, sex, age, telephone, address, state) {
        document.getElementById('edit_userId').value = id;
        document.getElementById('edit_userName').value = userName;
        document.getElementById('edit_password').value = password;
        document.getElementById('edit_sex').value = sex;
        document.getElementById('edit_age').value = age;
        document.getElementById('edit_telephone').value = telephone;
        document.getElementById('edit_address').value = address;
        document.getElementById('edit_state').value = state;
    }

   // 删除
        function confirmDelete(id) {
        if (confirm("确定要删除该用户吗？")) {
        window.location.href = "${pageContext.request.contextPath}/admin/UserDelete?id=" + id;
    }
    }
//查找
    $(document).ready(function() {
        $('#user_find_modal_btn').click(function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            var userName = $('#findByName').val();
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/UserFindByName",
                type: "GET",
                data: { name: userName },
                dataType: "json", // 指定期望的响应数据类型为 JSON
                success: function(users) {
                    if (users.length > 0) {
                        // 清空模态框内容
                        $('#userDetailContent').empty();

                        // 遍历返回的用户列表并动态添加内容
                        $.each(users, function(index, user) {
                            var content = '<p><strong>编号：</strong>' + user.id + '</p>' +
                                '<p><strong>用户名：</strong>' + user.userName + '</p>' +
                                '<p><strong>密码：</strong>' + user.password + '</p>' +
                                '<p><strong>性别：</strong>' + user.sex + '</p>' +
                                '<p><strong>年龄：</strong>' + user.age + '</p>' +
                                '<p><strong>电话：</strong>' + user.telephone + '</p>' +
                                '<p><strong>地址：</strong>' + user.address + '</p>' +
                                '<p><strong>有无领养：</strong>' + (user.state === 1 ? '已领养' : '未领养') + '</p>' +
                                '<hr>';
                            $('#userDetailContent').append(content);
                        });
                        // 显示模态框
                        $('#userDetailModal').modal('show');
                    } else {
                        alert("没有找到匹配的用户信息");
                    }
                },
                error: function() {
                    alert("查询失败");
                }
            });
        });
    });


</script>
</body>
</html>
